/* 青春有活力的主题配色 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      'base': #4776E6,
    ),
    'success': (
      'base': #00C9A7,
    ),
    'warning': (
      'base': #FFC107,
    ),
    'danger': (
      'base': #FF6B6B,
    ),
    'info': (
      'base': #8A8DBA,
    )
  ),

  $common-component-size: (
    'large': 40px,
    'default': 32px,
    'small': 24px,
  ),
  $border-radius: (
    'base': 6px,
    'small': 4px,
    'round': 20px,
    'circle': 50%,
  ),

  // 卡片组件样式
  $card: (
    'border-color': transparent,
    'border-radius': 12px,
    'padding': 20px,
    'shadow': 0 6px 16px rgba(0, 0, 0, 0.08)
  ),
  $tag:(
    'border-radius': 4px
  ),

  // Switch 组件样式
  $switch: (
    'core-border-radius': 20px,
    'button-border-radius': 20px
  ),

  // 对话框组件样式
  $dialog: (
    'border-radius': 12px,
    'padding-primary': 24px,
    'margin-top': 15vh
  ),

  // 表单相关组件样式
  $input: (
    'border-radius': 8px,
    'hover-border-color': #4776E6,
    'focus-border-color': #4776E6
  ),
  $form: (
    'label-font-size': 14px,
    'error-font-size': 12px
  )
);

// 如果只是按需导入，则可以忽略以下内容。
// 如果你想导入所有样式:
@use "element-plus/theme-chalk/src/index.scss" as *;

// 定义一些全局变量，用于整个应用
:root {
  --primary-gradient: linear-gradient(135deg, #4776E6 0%, #8E54E9 100%);
  --success-gradient: linear-gradient(135deg, #00C9A7 0%, #7BE495 100%);
  --warning-gradient: linear-gradient(135deg, #FFC107 0%, #FFD54F 100%);
  --danger-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF8E8E 100%);
  --card-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  --transition-fast: all 0.2s ease;
  --transition-normal: all 0.3s ease;
}

// 卡片样式
.el-card {
  border:1px solid #e4e7ed !important;
  border-radius: 10x !important;
  // box-shadow: var(--card-shadow) !important;
  transition: var(--transition-normal);


  .el-card__header {
    border-bottom: 1px solid rgba(71, 118, 230, 0.1);
    font-weight: 600;
  }
}

// Switch 样式
.el-switch__core .el-switch__action {
  border-radius: 50% !important;
  transition: var(--transition-fast);
}

// 单选框样式
.el-radio__inner {
  border-radius: 50% !important;
  &::after {
    border-radius: 50% !important;
  }
}

// 对话框样式
.el-dialog {
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
  
  .el-dialog__header {
    margin: 0;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(71, 118, 230, 0.1);
    background: rgba(71, 118, 230, 0.02);
    
    .el-dialog__title {
      font-size: 18px;
      font-weight: 600;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }
  
  .el-dialog__body {
    padding: 24px;
  }
  
  .el-dialog__footer {
    padding: 16px 24px;
    border-top: 1px solid rgba(71, 118, 230, 0.1);
    background: rgba(71, 118, 230, 0.02);
  }
}

// 表单样式
.el-form {
  .el-form-item {
    margin-bottom: 24px;
    
    .el-form-item__label {
      font-weight: 500;
      color: #333;
      padding-bottom: 8px;
    }
    
    .el-form-item__error {
      padding-top: 4px;
      color: #FF6B6B;
    }
  }
}

// 输入框样式
.el-input {
  .el-input__wrapper {
    border-radius: 8px;
    box-shadow: 0 0 0 1px #dcdfe6 inset;
    transition: var(--transition-fast);
    
    &:hover {
      box-shadow: 0 0 0 1px #4776E6 inset;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #4776E6 inset !important;
    }
  }
  
  &.is-disabled .el-input__wrapper {
    background-color: #f5f7fa;
    box-shadow: 0 0 0 1px #e4e7ed inset;
  }
}



// 表单内按钮组样式
.el-form-item__content {
  .el-button + .el-button {
    margin-left: 12px;
  }
}

// 必填星号样式
.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  color: #FF6B6B;
}

// 下拉菜单样式
.el-dropdown-menu {
  border-radius: 10px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
  
  .el-dropdown-menu__item {
    transition: var(--transition-fast);
    
    &:hover, &:focus {
      background-color: rgba(71, 118, 230, 0.08);
      color: #4776E6;
    }
  }
}

// 菜单样式
.el-menu {
  border-right: none;
  
  .el-menu-item {
    height: 50px;
    border-radius: 8px;
    margin: 4px 0;
    transition: var(--transition-normal);
    
    &:hover {
      background-color: rgba(71, 118, 230, 0.08);
    }
    
    &.is-active {
      background-color: rgba(71, 118, 230, 0.15);
      color: #4776E6;
      font-weight: 600;
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        right: 16px;
        top: 50%;
        width: 4px;
        height: 24px;
        transform: translateY(-50%);
        background: var(--primary-gradient);
        border-radius: 4px;
        opacity: 0.8;
      }
    }
  }
  
  .el-sub-menu__title {
    border-radius: 8px;
    transition: var(--transition-normal);
    
    &:hover {
      background-color: rgba(71, 118, 230, 0.08);
    }
  }
}